<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {router} from "@/router/index.js";

const formInline=ref({})
const editorOptions=ref([])
const getAuthors=()=>{
  axios.get("/news/getAuthors").then(resp=>{
    editorOptions.value=resp.data.map((item, index) => ({
      label: item.author,
      value: item.author
    }));
  })
}
const statusOptions=ref([
  {value:0,label:'未通过'},
  {value:1,label:'草稿'},
  {value:2,label:'审核中'},
  {value:3,label:'已通过'},
  {value:4,label:'已发布'},
  {value:5,label:'已下架'}
])
const query = ()=>{
  initData();
}
const resetForm = ()=>{
  formInline.value={}
}
const tableData = ref([])
const initData = ()=>{
  axios.post(`/audit/getNewsByStatus/${currentPage.value}/${pageSize.value}`,formInline.value).then(resp=>{
    tableData.value=resp.data.data;
    total.value=resp.data.total;
  })
}
const currentPage = ref(1)
const pageSize = ref(4)
const total = ref(0)
const handleCurrentChange =(val)=>{
  currentPage.value=val
  initData();
}
const handleSizeChange =(val)=>{
  pageSize.value=val
  initData();
}
const verify =(row)=>{
  router.push({
    path: '/newsDetail',
    query: { id: row.id }
  });
}
onMounted(()=>{
  initData();
  getAuthors();
})
</script>

<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>查询条件</span>
      </div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="文章标题：">
          <el-input v-model="formInline.title" placeholder="请输入文章标题"></el-input>
        </el-form-item>
        <el-form-item label="编辑：" style="width: 200px">
          <el-select v-model="formInline.editor" placeholder="全部" style="width: 100%">
            <el-option
                v-for="option in editorOptions"
                :key="option.value"
                :label="option.label"
                :value="option.value">
            </el-option>
          </el-select>
        </el-form-item>

        <!-- 使用 v-for 循环生成“状态”下拉框 -->
        <el-form-item label="状态：" style="width: 200px">
          <el-select v-model="formInline.status" placeholder="全部" style="width: 100%">
            <el-option
                v-for="option in statusOptions"
                :key="option.value"
                :label="option.label"
                :value="option.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="query">查询</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>资讯列表</span>
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="文章图片" width="120">
          <template #default="scope">
            <el-image
                :src="scope.row.thumbnail"
                fit="cover"
                style="width: 80px; height: 80px"
            />
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题" width="180"></el-table-column>
        <el-table-column prop="name" label="类型"></el-table-column>
        <el-table-column prop="author" label="作者"></el-table-column>
        <el-table-column prop="createTime" label="日期"></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button class="mx-1" type="text" @click="verify(scope.row)">审核</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 分页组件 -->
    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[4, 10, 20, 40]"
        :size="'small'"
        :disabled="false"
        :background="false"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        style="text-align: center; margin-top: 20px;"
    ></el-pagination>
  </div>
</template>

<style scoped>
.box-card {
  margin-bottom: 20px;
}
</style>